<template>
  <div class="body">
    <img src="../assets/logo.png" alt="" class="logo">
    <div class="enter_box">
      <div class="form-group">
        <input type="tel" v-model="phone" class="input-field" placeholder="输入手机号" @focus="hideBottomElements"
        @blur="showBottomElements">
      </div>
      <div class="form-group">
        <input type="password" v-model="pass" class="input-field" placeholder="输入密码" @focus="hideBottomElements"
        @blur="showBottomElements">
      </div>
      <div class="action-row">
        <label class="checkbox-group">
          <input type="checkbox" v-model="isAgreed">
          <p class="link-secondary">用户协议</p>
        </label>
        <div>
          忘记密码？
          前往注册
        </div>
      </div>
      <button class="login-btn" @click="loginClick">登录</button>
    </div>
    <img src="../assets/WeChat.png" alt="" class="wechat">
    <div class="prompt">@版权归大喇叭编程实训基地所有</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const phone = ref('');//手机号
const pass = ref('');//密码
const Regular = /^1[3-9]\d{9}$/;
const isAgreed = ref(false);//是否同意协议
import { login } from '../api/scenic.js';
import { showToast } from 'vant';//弹窗
const loginClick = () => {
  if (phone.value.trim() == "" || !Regular.test(phone.value)) {
    showToast('请输入正确的手机号');
    return;
  }
  console.log(pass.value.length);

  if (pass.value == "" || 5 >= pass.value.length > 18) {
    showToast('请输入正确的密码');
    return;
  }
  if (!isAgreed.value) {
    showToast('请先阅读用户协议');
    return;
  }
  console.log('登录成功');

  login({ tel: phone.value, pass: pass.value }).then(function (res) {
    if (res.code == 0) {
      showToast('请检查账号密码');
    } else if (res.code == 1) {
      showToast('登录成功');
      sessionStorage.setItem('user', JSON.stringify(res.data));
      setTimeout(() => {
        window.location.href = '/';
      }, 1000);
    } else {
      showToast(res.msg);
    }
    console.log(res); // 成功回调
  });
};

// 隐藏底部元素
const hideBottomElements = () => {
  showBottom.value = false;
};

// 显示底部元素（延迟 300ms 避免键盘收起动画冲突）
const showBottomElements = () => {
  setTimeout(() => {
    showBottom.value = true;
  }, 300);
};
</script>

<style scoped>
.body {
  width: 100%;
  height: 100dvh;
  background-image: url('../assets/login_back.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
}

.logo {
  width: 120px;
  position: fixed;
  top: 10%;
  left: 8%;
}

/* 登录内容盒子 */
.enter_box {
  position: fixed;
  margin-top: 60%;
  padding: 5%;
  width: 90%;
  margin-left: 5%;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  /* 半透明背景 */
  backdrop-filter: blur(10px);
  /* 背景模糊 */
  -webkit-backdrop-filter: blur(10px);
  /* 兼容老版本 Safari */
}

.van-cell-group {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
}

.van-field {
  height: 30px;
  font-size: 13px;
  padding: 0%;
  border-radius: 0;
}

.interval {
  height: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.input-field {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  background: white;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  font-size: 14px;
  color: #007aff;
}

.link {
  color: #007aff;
  text-decoration: none;
}

.link-secondary {
  color: #666;
}

.login-btn {
  width: 100%;
  height: 35px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.protocol {
  color: #666;
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
}

.checkbox-group {
  display: flex;
  color: #007aff;
}

.link-secondary {
  color: #007aff;
}

.wechat {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.prompt {
  position: fixed;
  bottom: 1%;
  width: 100%;
  text-align: center;
}
</style>